<template>
    <div>
        <el-select
            placeholder="ModelNumber"
            clearable
            filterable
            v-model="input.userId"
            @change="chooseUserList"
        >
            <el-option
                v-for="user in inputUserList"
                :key="user.userId"
                :value="user.userId"
                :label="user.userName +' --  ' + user.postName "
            >
                <!--<span style="float: left">{{ user.userName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{user.roleName}}</span>-->
            </el-option>
        </el-select>

        <!-- <select  size="10" class="el-input el-input--3 el-input--suffix select-warp"  v-model="show.userId" @change="chooseUserSearch" >
       <option label="查询所有数据"></option>
        <option v-for="user in showUserList"  :key="user.userId" :value="user.userId" :label="user.userName + '  -- ' + user.roleName " selected></option>
        </select>-->
        <div class="UserLeftSelect-wrap">
            <ul>
                <li
                    @click="chooseUserSearch(user.userId)"
                    v-for="user in showUserList"
                    :key="user.userId"
                    :class="user.userId === show.userId?'curren':''"
                >{{user.userName}} -- {{user.postName}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "UserLeftSelect",
    data() {
        return {
            input: { userId: 1 },
            show: { userId: 1 },
            inputUserList: [],
            showUserList: [],
            userChargeList: [], //产品负责人列表
            user: this.$store.getters
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.input.userId = 1;
            this.show.userId = 1;
            (this.inputUserList = []),
                (this.showUserList = []),
                this.getDeptUserAll();
        },
        initInputSelectAndShowInput() {
            this.input.userId = 1;
            this.show.userId = 1;
        },
        getDeptUserAll() {
            var url = "/system/user/getDeptUserList";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.rows;
                    console.log("-----------")
                    console.log(data)
                    this.inputUserList = data;
                    this.showUserList = data;
                }
            });
        },
        chooseUserList() {
            var userId = this.input.userId;
            if (userId == null || userId.length == 0) {
                this.getDeptUserAll();
            } else {
                var url =
                    this.GLOBAL.productService +
                    "/productSubscriptionUserRel/findUserByUserId/" +
                    userId;
                //  var url = "http://192.168.1.224:10025/relPermission/getPermissions/" + userId
                this.$ajax.get(url, {}).then(res => {
                    if (res.data.code == "200") {
                        var data = res.data.data;
                        this.showUserList = data;
                    }
                });
            }
        },
        chooseUserSearch(id) {
            this.show.userId = id;
            this.$emit("sendUserIds", this.show.userId);
        }
    }
};
</script>

<style lang="stylus" scoped>
.el-select {
    margin-top: 22px;
    width: 100%;
}

.UserLeftSelect-wrap {
    margin-top: 20px;
    border: 1px solid #eeeeee;
    overflow: auto;
    max-height: 400px;

    ul {
        li {
            font-size: 14px;
            padding: 8px 15px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
                background: #eeeeee;
                cursor: pointer;
            }

            &.curren {
                background: #409eff;
                color: #ffffff;
                cursor: pointer;
            }
        }
    }
}
</style>
